<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base/layout.html">

<!-- start: Content -->
<div layout:fragment="content" class="main ">

    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a th:href="@{../infoManage/indexTotal}">首页</a></li>
                <li><i class="fa fa-table"></i>企业实践统计</li>
            </ol>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-indent red"></i><strong>查询信息</strong></h2>
                </div>
                <div class="panel-body">
                    <form id="modularForm" method="post"
                          class="form-horizontal " role="form">


                        <div class="form-group">

                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">学院</label>
                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectDepartment" name="departmentid" class="form-control" size="1">
                                        </select>
                                    </div>

                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">专业</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectMajor" name="majorid" class="form-control" size="1">
                                        </select>
                                    </div>

                                    <button id="submitBtn" type="button" class="btn btn-sm btn-success"><i
                                            class="fa fa-dot-circle-o"></i> 统计
                                    </button>
                                    <button id="resetBtn" type="button" class="btn btn-sm btn-danger"><i
                                            class="fa fa-ban"></i> 重置
                                    </button>

                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">时间</label>
                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <input type="text" class="form-control date-picker" id="practiceTimePlan"
                                               name="practicetimeplan" readonly
                                                placeholder="计划时间">
                                    </div>
                                    <label class="col-lg-1 col-md-1 col-sm-1 control-label" style="text-align: center">-</label>
                                    <div class="col-lg-2 col-md-2">
                                        <input type="text" class="form-control date-picker" id="practiceTimeActual"
                                               name="practicetimeactual" readonly
                                               placeholder="实际时间">
                                    </div>

                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">时间类别</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="statisticalType" name="statisticaltype" class="form-control" size="1">
                                            <option value="1">年份</option>
                                            <option value="2">季度</option>
                                            <option value="3">月份</option>
                                            <option value="4">周次</option>

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div><!--.col-->
    </div><!--.row-->

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-table red"></i><span class="break"></span><strong>企业实践统计</strong></h2>

                </div>
                <div class="panel-body">
                    <label class="col-lg-2 col-md-2 col-sm-12 control-label"></label>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 800px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>


    <script>

        $(document).ready(function () {
            //加载学院
            initDepartment();
            //加载专业
            initMajor();
            //加载时间控件
            setDatePicker("#practiceTimePlan");
            setDatePicker("#practiceTimeActual");

        });

        function initDepartment() {
            $("#selectDepartment").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../department/selectDepartmentInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {
                    for (var i in data) {
                            $("#selectDepartment").append("<option value=" + data[i].id + ">" + data[i].department + "</option>");
                    }
                }
            })
            $("#selectDepartment").change(function () {
                $("#selectMajor").empty();
                $("#selectMajor").append("<option value=-1>请选择</option>");
                var str = $("#selectDepartment").find("option:selected").val();
                if (str > 9) {
                    $("#selectMajor").empty();
                    $("#selectMajor").append("<option value=-1>无</option>");
                   /* $.ajax({
                        url: '../major/selectMajorInfo',
                        type: 'get',
                        dataType: 'json',
                        data: {},
                        success: function (data) {
                            for (var i in data) {
                                $("#selectMajor").append("<option value=" + data[i].id + ">" + data[i].majorname + "</option>");
                            }
                        }
                    })*/
                } else if (str==-1) {
                    $("#selectMajor").empty();
                    $("#selectMajor").append("<option value=-1>请先选择学院</option>");
                }else{
                    $.ajax({
                        url: '../major/selectMajor',
                        type: 'post',
                        data: {'departmentid': $("select[name='departmentid']").val()},
                        success: function (data) {
                            for (var i in data) {
                                $("#selectMajor").append("<option value=" + data[i].id + ">" + data[i].majorname + "</option>");
                            }
                        }
                    })
                }
            })
        }

        //加载专业
        function initMajor() {
            var t;
            t = setTimeout(function () {
                var str = $("#selectDepartment").find("option:selected").val();
                if (str == -1) {
                    $("#selectMajor").empty();
                    $("#selectMajor").append("<option value=-1>请先选择学院</option>");
                    /*$.ajax({
                        url: '../major/selectMajorInfo',
                        type: 'get',
                        dataType: 'json',
                        data: {},
                        success: function (data) {
                            for (var i in data) {
                                $("#selectMajor").append("<option value=" + data[i].id + ">" + data[i].majorname + "</option>");
                            }
                        }
                    })*/

                } else if (str>9) {
                    $("#selectMajor").empty();
                    $("#selectMajor").append("<option value=-1>无</option>");
                } else {
                    $("#selectMajor").append("<option value=-1>请选择</option>");
                    $.ajax({
                        url: '../major/selectMajor',
                        type: 'post',
                        data: {'departmentid': $("select[name='departmentid']").val()},
                        success: function (data) {
                            for (var i in data) {
                                $("#selectMajor").append("<option value=" + data[i].id + " selected>" + data[i].majorname + "</option>");
                            }
                        }
                    })
                }
            }, 0),
                function () {
                    clearTimeout(t);
                }
        }

        /*//加载专业重置
        function initMajorReset(){
            $("#selectMajor").empty();
            $("#selectMajor").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../major/selectMajorInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {
                    for (var i in data) {
                        $("#selectMajor").append("<option value=" + data[i].id + ">" + data[i].majorname + "</option>");
                    }
                }
            })
        }*/

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '企业实践统计图'
            },
            tooltip: {},
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            legend: {
                data: ['企业数量','下企业人数']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '企业数量',
                type: 'bar',
                data: []
            },
                {
                    name: '下企业人数',
                    type: 'bar',
                    data: []
                }],
            optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data;
                var series = opt.series;
                var table = '<table id="test" class="table-bordered table-striped" style="width:100%;text-align:center">' + '<tbody><tr>' + '<td>日期</td>' + '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>' + '</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                    table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>' + '</tr>';
                }
                table += '</tbody>';
                return table;
            }
        };
        myChart.setOption(option);



        //统计
        $("#submitBtn").on("click", function () {
            $('#modularForm').ajaxSubmit({
                url: '../practiceManageInfo/selectPracticeStatistics',
                type: 'post',
                success: function (data) {

                    var unitNum_ = [];
                    var stuNum_= [];
                    var str_ = [];

                    for (var i = 0; i < data.length; i++) {
                        unitNum_.push(data[i].unitNum);
                        stuNum_.push(data[i].stuNum);
                        str_.push(data[i].dateCount);

                    }
                    myChart.setOption({
                        xAxis: {
                            data: str_
                        },
                        series: [{
                            name: '企业数量',
                            data: unitNum_
                        },
                            {
                                name: '下企业人数',
                                data:stuNum_
                            }
                        ]
                    })
                }
            })
        });



        //重置按钮
        $("#resetBtn").on("click", function () {
           /* //加载专业重置
            initMajorReset();*/
            $("#selectMajor").empty();
            $("#selectMajor").append("<option value=-1>请先选择学院</option>");
            $("#selectDepartment").val("-1");
            $("#practiceTimePlan").val("");
            $("#practiceTimeActual").val("");
            $("#statisticalType").val("1");
        });

        //导出
        $("#exportBtn").on("click", function () {
            var mycanvas = $("#main").find("canvas")[0];

            var image = mycanvas.toDataURL("image/png");

            var $a = document.createElement('a');
            $a.setAttribute("href", image);
            $a.setAttribute("download", "统计图片下载");
            $a.click();


        });



    </script>


</div>
</html>